// src/APP.vue

<template>
<div id="v-if-example">
  <h1 v-if="simple">单独使用</h1>

  <template v-if="ok">
    <h1>与template元素一起使用</h1>
    <p>与template元素一起使用 1</p>
    <p>与template元素一起使用 2</p>
  </template>

  <div v-if="Math.random() > 0.5">
    v-if配合v-else一起使用1
  </div>
  <div v-else>
        v-if配合v-else一起使用2
  </div>

  <div v-if="type === 'A'">
    v-if配合v-else-if一起使用1
  </div>
  <div v-else-if="type === 'B'">
        v-if配合v-else-if一起使用2
  </div>
  <div v-else-if="type === 'C'">
        v-if配合v-else-if一起使用3
  </div>
  <div v-else>
       v-if配合v-else-if一起使用4
  </div>
</div>
</template>

<script lang="ts">
import {  computed, defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const simple = ref(true)

    const ok = ref(true)

    const type = ref('C')

    return {
      simple,
      ok,
      type
    }
  }
})
</script>